<template>
    <div class="InboundList-box">
       <!-- 积分管理 -->
        <!-- 测试 -->
        <h3 class="mb16">{{studentName}}的个人积分</h3>
        <!-- 搜索栏 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <!-- 活动信息列表页面 -->
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="total"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      :pointShow='pointShow'
      @uploadView="uploadView"
      @uploadEdit="uploadEdit"
      :pagination="inventoryTableData.length>0"
    >
    </forTableCom>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="学生活动信息"
      width="1000px"
    >
      <div class="activity-info">
        <!-- 学生信息 -->
        <div class="info-section">
          <h3>学生信息</h3>
          <div class="student-form">
            <div class="form-row">
              <span class="label">学生姓名</span>
              <el-input disabled class="input" v-model="activityInfo2.nickName" />
            </div>
            <div class="form-row">
              <span class="label">学号</span>
              <el-input disabled class="input" v-model="activityInfo2.userName" />
            </div>
            <div class="form-row">
              <span class="label">所属组织</span>
              <el-input disabled class="input" v-model="zuzhi" />
            </div>
          </div>
        </div>

        <!-- 活动信息 -->
        <div class="info-section">
          <h3>活动信息</h3>
          <div class="activity-form">
            <div class="form-row">
              <span class="label">活动名称</span>
              <el-input disabled class="input" v-model="activityInfo2.title" />
            </div>
            <div class="form-row">
              <span class="label">报名开始时间</span>
              <el-date-picker
              disabled
              class="input"
                v-model="activityInfo2.activityStart"
                type="datetime"
                placeholder="选择日期时间"
              />
            </div>
            <div class="form-row">
              <span class="label">报名截止时间</span>
              <el-date-picker
              disabled
              class="input"
                v-model="activityInfo2.activityEnd"
                type="datetime"
                placeholder="选择日期时间"
              />
            </div>
            <div class="form-row">
              <span class="label">活动开始时间</span>
              <el-date-picker
              disabled
              class="input"
                v-model="activityInfo2.signupStart"
                type="datetime"
                placeholder="选择日期时间"
              />
            </div>
            <div class="form-row">
              <span class="label">活动结束时间</span>
              <el-date-picker
              disabled
              class="input"
                v-model="activityInfo2.signupEnd"
                type="datetime"
                placeholder="选择日期时间"
              />
            </div>
            <div class="form-row">
              <span class="label">活动地点</span>
              <el-input disabled class="input" v-model="activityInfo2.address" />
            </div>
            <div class="form-row">
              <span class="label">活动范围</span>
              <el-input disabled class="input" v-model="fanwei" />
            </div>
            <div class="form-row">
              <span class="label">活动状态</span>
              <el-select disabled v-model="activityInfo2.status" placeholder="请选择">
                <el-option label="已结束" value="0" />
                <el-option label="进行中" value="1" />
                <el-option label="未开始" value="2" />
              </el-select>
            </div>
            <div class="form-row">
              <span class="label">活动类型</span>
              <el-input disabled class="input" v-model="activityInfo2.activityCategoryName" />
            </div>
            <div class="form-row">
              <span class="label">得分标准</span>
              <el-input disabled class="input" v-model="activityInfo2.creditSource" />
            </div>
            <div class="form-row">
              <span class="label">1</span>
              <el-input disabled class="input" v-model="activityInfo2.scoreStandard" />
            </div>
            <div class="form-row">
              <span class="label">1</span>
             <el-input disabled class="input" v-model="activityInfo2.scoreStandard" />
            </div>
          </div>
        </div>

        <!-- 活动内容 -->
        <div class="info-section">
          <h3>活动内容</h3>
          <el-input
          disabled
            v-model="activityInfo2.scoreConfig"
            type="textarea"
            :rows="4"
            placeholder="请输入活动内容"
          />
        </div>

        <!-- 更改积分 -->
        <div class="info-section">
          <h3>更改积分</h3>
          <div class="score-change">
            <div class="form-row">
              <span class="label">获得分值</span>
              <el-input disabled class="input" v-model="activityInfo2.creditValue" />
            </div>
            <div class="form-row">
              <span class="label">加分/减分</span>
              <el-input class="input" v-model="forms.creditValue" placeholder="请输入分值对学生分数进行更改" />
            </div>
            <div class="form-row">
              <span class="label">更改原因</span>
              <el-input
                v-model="forms.remark"
                type="textarea"
                :rows="4"
                placeholder="请填写加分/减分原因"
              />
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
      <!-- 查看详情弹出框抽屉 -->
       <ActivityDrawer :detail="detail" v-model:visible="drawerVisible"/>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import serchForm from '@/components/inventory/serchForm.vue'
import { checkPermi } from '@/utils/permission.js'
import forTableCom from '@/components/forTableCom/index.vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import {listUser2,recordsDetail,recordsPut} from '@/api/grade/gradeSet.js'
import {quickCodeChildrenApi} from '@/api/system/dict/type.js'
import { getToken } from "@/utils/auth";
import FileUpload from '@/components/FileUpload'
import ActivityDrawer from '@/components/home/DrawerList';


const router = useRouter();
const route = useRoute();
const data = reactive({});
const { proxy } = getCurrentInstance();

const userId = route.params.id // 动态路由传过来的值用params接收
const studentName = route.params.title // 动态路由传过来的值用params接收
const dateId = route.params.dateid // 动态路由传过来的值用params接收

const showDrawer = ref(false);


const form = ref({
     fileUrl:'',      //文件地址
     fileType:'',       //类型
     title:'',   //组织
     remark:'',         //备注
     categoryCode:'',  //新增时候选择的类型
     fileSize:'',      //文件大小
  })
/** 重置操作表单 */
function reset() {
  form.value = {
    fileUrl: undefined, 
    title: undefined,
    remark: undefined,
    fileType:undefined,
  };
  proxy.resetForm("userRef");
};
const rules = ref({
    title: [{ required: true, message: "请输入组织", trigger: "blur" }],
    fileUrl: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
    categoryCode: [{ required: true, message: "请选择学期", trigger: "change"}],
  })

// 表单
let inventoryForm = ref({
  uploadDate: '', // 活动名称
  title: '', // 得分时间
  id: '', // 活动类型
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    title: 'uploadDate',
    label: '活动名称',
  },
  {
    title: 'id',
    label: '活动类型',
  },
  {
    title: 'title',
    label: '得分时间',
    type: 'datetimerange',
  },
])
// 查找
const onSearch = (v) => {
  console.log(v,'查看入库页面时间参数')
  // 每次查询后回到页1
  pageNum.value = 1
}

// 显示操作栏
const pointShow = ref(true)
let idActive = 'id'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v,'打印v')
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  // let params = inventoryForm.value
  // listUser(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}
// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'activityId',
    label: '活动编号',
    activityIdGrade:true
  },
  {
    prop: 'title',
    label: '活动名称',
  },
  {
    prop: 'activityCategoryName',
    label: '活动类型',
  },
  {
    prop: 'address',
    label: '活动地点',
  },
  {
    prop: 'applyTime',
    label: '得分时间',
  },
  {
    prop: 'creditValue',
    label: '获得积分',
  },
])
// 表格数据内容
let inventoryTableData = ref([])
const uploadDel = (val)=>{  //列表单个删除操作
      let {i , v} = val
      console.log(v.id);
      
      ElMessageBox.confirm(
    '确定要删除该资料吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
         delUser(v.id).then(res=>{
              if(res.code===200){
                   ElMessage({
                 message: '删除成功',
                 type: 'success',
               })
               listUserApiFn()
              }
         })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

const detail = ref({})
const uploadView = (val)=>{ //查看按钮
    let {i , v} = val
    drawerVisible.value = true
    recordsDetail(v.id).then(res=>{
         if(res.code===200){
              detail.value = res.data
              console.log(detail.value,'查看积分详情');
         }
    })
}

let zuzhi = ref('')  //回显所属组织
let deptNames = ref([])  //接收过滤的deptName
let fanwei = ref('')
let ids = ref(0)
const uploadEdit = (val)=>{ //编辑按钮
    let {i , v} = val
    ids.value = v.id
    console.log(ids.value,'ids.value');
    
    dialogVisible.value = true;
    recordsDetail(v.id).then(res=>{
         if(res.code===200){
              activityInfo2.value.nickName = res.data.nickName
              activityInfo2.value.userName = res.data.userName
              activityInfo2.value.creditSource = res.data.creditSource
              activityInfo2.value.deptNameList = res.data.deptNameList
              zuzhi.value = activityInfo2.value.deptNameList.join(' / ')
              activityInfo2.value.title = res.data.activity.title
              activityInfo2.value.activityStart = res.data.activity.activityStart
              activityInfo2.value.depts = res.data.activity.depts
              deptNames.value = res.data.activity.depts.map(item => item.deptName);  //过滤deptName
              fanwei.value = deptNames.value.join(' / ')
              
              activityInfo2.value.activityEnd = res.data.activity.activityEnd
              activityInfo2.value.signupStart = res.data.activity.signupStart
              activityInfo2.value.signupEnd = res.data.activity.signupEnd
              activityInfo2.value.address = res.data.activity.address
              activityInfo2.value.status = String(res.data.activity.status)
              activityInfo2.value.activityCategoryName = res.data.activity.activityCategoryName
              activityInfo2.value.scoreConfig = res.data.activity.scoreConfig
              activityInfo2.value.creditValue = res.data.creditValue
              
              console.log(res.data,'积分详情');
              
         }
    })
    
}

const editId = ref(-1)
const add = ()=>{ //打开新增弹出框
    open.value = true
    title.value = '新增资料'
}


// 查询单个学生积分列表数据
const listUserApiFn = async (data = '') => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    userId:userId,
    dateId:dateId
  }
  let params = Object.assign(data, page)
  let res = await listUser2(params)
  let { code, rows } = res
  if (code == 200) {
    console.log(rows,'打印学生成绩列表数据');
    // total.value = res.total
    inventoryTableData.value = rows
  }
}
let options = ref([])
const quickCodeChildrenApiFn =()=>{  //通过快码获得学期
    quickCodeChildrenApi({parentCode:30000}).then(res=>{
        console.log(res,'查询子集快码');
        if(res.code===200){
           options.value = res.rows
        }
    })
}

// 查看详情部分
const drawerVisible = ref(false)


//编辑部分
const dialogVisible = ref(false);
const scoreChange = ref(20);
const changeReason = ref('');
const changeReason2 = ref('');

const studentInfo2 = ref({
  
});

const activityInfo2 = ref({
  nickName: '',
  userName: '',
  deptNameList:[],

  title: '',
  activityStart: '',
  activityEnd: '',
  signupStart: '',
  signupEnd: '',
  address: '',
  scope: '',
  scoreStandard: '',
  status:'0',
  activityCategoryName: '',
  scoreConfig: '',
  creditValue:'',
  depts:[],
  creditSource:0,

});

const resetForm = () => {
  // studentInfo2.value = {
  //   title: '张张张',
  //   studentId: '0615250101',
  //   organization: '电子信息工程学院/计算机应用技术/计应2501'
  // };
  
  // activityInfo2.value = {
  //   title: '梁小静：亚洲女飞人的奔跑人生',
  //   activityStart: '2024-08-23 18:12',
  //   activityEnd: '2024-08-30 18:12',
  //   signupStart: '2024-08-30 18:12',
  //   address: '多功能5号会议室',
  //   scope: '计算机系',
  //   scoreStandard: '自定义',
  //   status: 'ended',
  //   type: '素养课程学习',
  //   content: '汇聚各种精彩表演、游戏和美食，为市民带来一场丰富多彩的夏日盛宴。活动伊始，将由一支活力四溢的舞蹈队带来开场表演，随后是各种趣味游戏和挑战'
  // };
  
  // scoreChange.value = 20;
  // changeReason.value = '';
  // changeReason2.value = '';
};

let forms = ref({
    remark:'',  //备注
    creditValue:'', //加分/减分
})
const submitForm = () => {
  console.log(forms.value,'forms.value');
  
   forms.value.creditValue = Number(forms.value.creditValue)
   forms.value.id = ids.value
  recordsPut(forms.value).then(res=>{
    if(res.code===200){
         ElMessage({
                 message: '编辑成功',
                 type: 'success',
               })
    }
      console.log('编辑成功:',res);
  })
  dialogVisible.value = false;
};
onMounted(()=>{
    Promise.all([listUserApiFn(),quickCodeChildrenApiFn()])
})

</script>

<style lang='scss' scoped>
.InboundList-box {
    padding: 16px;
    .function-box {
    display: flex;
    align-items: center;
  }
}

.activity-info {
  padding: 0 10px;
}

.info-section {
  margin-bottom: 20px;
}

.info-section h3 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
  padding-left: 5px;
  border-left: 4px solid #409eff;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.form-row .label {
  width: 120px;
  text-align: right;
  padding-right: 12px;
  font-size: 14px;
  color: #606266;
}

.form-row .el-input,
.form-row .el-input-number,
.form-row .el-select,
.form-row .el-date-editor {
  flex: 1;
  margin-right: 20px;
}

.form-row .el-textarea {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Adjust spacing for score change section */
.score-change .form-row {
  margin-bottom: 0;
}


.student-form{
  display: flex;
  justify-content: center;
  .form-row{
     width: 30%;
     display: flex;
     flex-direction: column;
     margin-right: 40px;
     .label{
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
     }
     .input{
       margin-left: 20px;
     }
  }
  .form-row:nth-child(3){
       margin-right: 0;
  }
}

.activity-form{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .form-row{
     width: 30%;
     display: flex;
     flex-direction: column;
     margin-right: 40px;
     .label{
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
     }
     .input{
       margin-left: 20px;
     }
  }
  .form-row:nth-child(3){
       margin-right: 0;
  }
  .form-row:nth-child(6){
       margin-right: 0;
  }
  .form-row:nth-child(9){
       margin-right: 0;
  }
  .form-row:nth-child(10){
       margin-left: -40px;
  }
  .form-row:nth-child(12){
      margin-right: 0;
       visibility:hidden
  }
  .form-row:nth-child(11){
      margin-right: 0;
       visibility:hidden
  }
}
:deep(.el-date-editor){
   width: 283px;
}
:deep(.el-select .el-input__wrapper){
    width: 260px;
}

.score-change{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .form-row{
     width: 43%;
     display: flex;
     flex-direction: column;
     margin-right: 120px;
     .label{
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
     }
     .input{
       margin-left: 20px;
     }
     
  }
  .form-row:nth-child(3){
       margin-right: 0;
       margin-top: 20px;
       width: 100%;
  }
  .form-row:nth-child(2){
       margin-right: 0;
  }
}
.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>

